<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>3.1页面头部制作练习题</title>
    <!--
    根据所学知识，实现如下图所示的简单无序列表，并为每个列表项添加超链接。每个列表项的宽度为50px，高度为30px，列表中的文字在水平和垂直方向上均居中显示，超链接初始状态和访问后的状态均为黑色无下划线，鼠标经过和点击时文字均为白色，无下划线，背景颜色为#BE3948。
    -->
    <style>
    /* 这里是CSS代码 */
    li{
        line-height:30px;
        width:50px;
        float:left;
        list-style:none;
    }
    li a{
        display:inline-block;
        width:100%;
        text-align:center;
    }
    li a:link,li a:visited{
        text-decoration:none;
        color:#000;
    }
    li a:hover,li a:active{
        text-decoration:none;
        color:#fff;
        background-color:#BE3948;
    }
    </style>
  </head>

  <body>
    <h3>课程难度</h3>
    <!--在此制作一个无序列表-->
    <ul>
        <li><a href="#">全部</a></li>
        <li><a href="#">初级</a></li>
        <li><a href="#">中级</a></li>
        <li><a href="#">高级</a></li>
    </ul>
   </body>
</html>